<template>
  <view class="container">
    <view @click="openPopup()">
      <up-input :placeholder="placeholder" v-model="userName" border="surround" readonly :customStyle="{
        width: '83vw',
        pointerEvents: 'none'
      }"></up-input>
    </view>
    <!-- 选择用户 -->
    <!--		<up-popup mode="right" :customStyle="{ width: '100vw', overflowY: 'auto', height: 'auto' }" v-model:show="show">-->
    <!--			<up-navbar title="人员选择" :autoBack="false" placeholder @leftClick="closePopup"></up-navbar>-->
    <!--			<OrgPicker ref="mallList" :overlay="false" :type="'user'" :multiple="false" :entry="'component'"-->
    <!--				@ok="selected">-->
    <!--			</OrgPicker>-->
    <!--		</up-popup>-->
  </view>
</template>

<script>
import OrgPicker from "@/components/OrgPicker/index.vue"
import componentMinxins from '../ComponentMinxins'

export default {
  mixins: [componentMinxins],
  components: {
    OrgPicker
  },
  name: "TextInput",
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    render: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: null
    },
    titleItems: {
      type: String,
      default: null
    },
    TableListValue: {
      type: Array,
      default: () => {
        return []
      }
    },
    itemId: {
      type: String,
      required: true
    },
    ApplyDetailList: {
      type: Array,
      default: () => {
        return []
      }
    },

  },
  watch: {
    userName: {
      handler (newValue) {
        let value = uni.getStorageSync('formData');
        let formItems = JSON.parse(value.formItems);
        formItems.forEach(item => {
          const targetList = item?.props?.columns || item?.props?.items;
          if (item.title == this.title) {
            item.value.push(...this.selectedDept);
            uni.setStorageSync(item.id, this.selectedDept || newValue);
          } else if (this.titleItems == item.title && item.title == this.titleItems) {
            targetList.forEach(columnsitem => {
              if (columnsitem.title == this.label) {
                columnsitem.value = this.selectedDept || newValue;
                uni.setStorageSync(columnsitem.id, this.selectedDept || newValue);
              }
            })
          }
        })
      }
    }
  },
  data () {
    return {
      show: false,
      userName: '',
      _value: '',
      fuzhiItemid: '',
      fuzhititle: '',
      selectedDept: [] // 保存选中的部门数据
    }
  },
  created () {
    uni.$on('applyUserPicker', (data) => {
      // this.selected(data)
      if (data?.fuzhiItemid === this.itemId) {
        this.userName = data.data.map(item => item.name).join('、');
        this.selectedDept = data.data
        this.$emit('selectedTableList');
      }
    })
  },

  mounted () {
    setTimeout(() => {
      let value = uni.getStorageSync('formData');
      let user = JSON.parse(uni.getStorageSync('user')).user || JSON.parse(uni.getStorageSync('user'))
      let formItems = JSON.parse(value.formItems);
      let uservalue = [{ name: user.name || user.worker_name, id: user.worker_id, avatar: user.avatar || user.img_url, type: 'user' }];
      formItems.forEach(item => {
        if (item.title == this.title) {
          uni.removeStorageSync(`${item.id}`);
        }
      });
      this.setechodata()
    }, 100);



  },
  methods: {
    setechodata () {
      if (this.ApplyDetailList && this.ApplyDetailList.formData && this.itemId) {
        if (this.ApplyDetailList.formData.hasOwnProperty(this.itemId)) {
          const fieldValue = this.ApplyDetailList.formData[this.itemId];
          if (Array.isArray(fieldValue) && fieldValue.length > 0) {
            this.userName = fieldValue.map(item => item.name).join('、');;
            this.selectedDept = fieldValue
          } else {
          }
        }
      }
    },
    openPopup () {
      let multiple = (this.title == '作陪人员' || this.itemId == 'field5571085968434') ? true :false
      // console.log()
      // this.show = true;
      this.fuzhiItemid = this.itemId
      uni.navigateTo({
        url: `/components/OrgPicker/index?overlay=overlay&entry=component&VisibleandHidden=true&title=人员选择&type=user&multiple=${multiple}&source=UserPicker&fuzhiItemid=${this.itemId}`
      });
    },
    closePopup () {
      this.show = false;
      this.$refs.mallList.selection = [];
    },
    selected (user) {
      // this.show = false;
      this._value = user;
      this.userName = user[0].name;
      this.$emit('selectedTableList');
    },
  }
}
</script>

<style></style>
